<template>
  <div>
    <a-card class="card" title="京东账号" :bordered="false">
      <a-form :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="4" :md="8" :sm="24">
            <a-form-item>
              <a-input
                v-decorator="[ 'jdUserName',{rules: [{ required: true, message: '请填写京东账号'}]}]"
                placeholder="京东账号"
                v-model="jdUserName"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-button @click="addJdUser()" htmlType="submit" type="primary">添加账号</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        :rowKey="jdUserList => jdUserList.id"
        :dataSource="jdUserList"
        :loading="loading"
      >
        <span slot="code" slot-scope="row">{{ row.bra_id + 10000 }}</span>
        <div slot="action" slot-scope="row">
          <a-button @click="delJdUser(row.bu_jd_user_name)" type="link">删除</a-button>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getjdList, addJdUser, delJdUser } from '@/api/command/branch'
const columns = [
  {
    title: '旺旺账号',
    dataIndex: 'bu_jd_user_name'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'AdminUser',
  data () {
    return {
      description: '所有分站管理',
      columns,
      loading: false,
      jdUserList: [],
      branchId: '1',
      jdUserName: ''
    }
  },
  created () {
    this.branchId = this.$route.query.id
    this.getUserList()
  },
  methods: {
    getUserList () {
      getjdList({ branchId: this.branchId })
        .then(res => {
          this.jdUserList = res.result
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    },
    addJdUser () {
      addJdUser({ branchId: this.branchId, jdUserName: this.jdUserName })
        .then(res => {
          this.getUserList()
          this.loading = false
          this.$message.success(res.message)
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    },
    delJdUser (jdUserName) {
      delJdUser({ branchId: this.branchId, jdUserName: jdUserName })
        .then(res => {
          this.getUserList()
          this.loading = false
          this.$message.success(res.message)
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    }
  }
}
</script>
